<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body {
            background: url("../img/bg.png");
        }

        .center {
            background-color: white;
            margin: auto;
            text-align: center;
            width: 400px;
            margin-top:50px ;
            border-radius:15px;
            line-height: 45px;
            box-shadow: 10px 10px 10px 10px rgba(128,128,128,0.5)
        }
       .center1 input{
            border: 1px solid grey;
            border-radius: 5px;
            width:70%;
            height: 30px;
            outline: none;
        }
        button{
            border:1px solid crimson ;
            border-radius: 5px;
            width:90% ;
            height:30px ;
            background: crimson;
            color: white;
            font-size: 15px;
        }
        .tou1{
            font-size: 26px;
            color: orangered;
            font-family: 黑体;
            text-align: center;
        }
        .center2{
          text-align: left;
        }
        .center3{
            text-align: left;
        }
    </style>
</head>

<body>
<div>
    <img src="../img/logo.png">
</div>
<div class="center">
    <thead>
    <div class="tou1">注册信息</div>
    </thead>
    <hr>
    <form action="#" method="post">
        <div class="center1">
            <label for="username">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
            <input type="text" id="username" name="username" value="" placeholder="请输入姓名" required/>
        </div>
        <div class="center1">
            <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
            <input type="password" id="password" name="password" value="" placeholder="请输入密码" required/>
        </div>
        <div class="center1">
            <label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
            <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required/>
        </div >
        <div class="center1">
            <label for="tel">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</label>
            <input type="tel" id="tel" name="tel" value="" placeholder="请输入邮箱" required/>
        </div>
        <hr>
        <div class="center2">
            <label for="gender">&nbsp;&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
            <input type="radio" id="gender" name="gender" value="man"/>男
            &nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" name="gender" value="womam"/>女
        </div>
        <div class="center3">
            <label for="hobby">&nbsp;&nbsp;&nbsp;爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
          &nbsp;&nbsp;&nbsp;<input type="checkbox" name="hobby" value="movie"/>电影
         &nbsp;&nbsp;&nbsp;   <input type="checkbox" name="hobby" value="game"/>游戏
        </div>
        <div class="center1">
            <label for="birthday">出生日期：</label>
            <input type="date" id="birthday" name="birthday" value=""/>
        </div>
<!--        <div>-->
<!--            <label for="city">所在城市：</label>-->
<!--            <select id="city" name="city">-->
<!--                <option>-&#45;&#45;请选择城市-&#45;&#45;</option>-->
<!--                <optgroup label="直辖市">-->
<!--                    <option>北京</option>-->
<!--                    <option>上海</option>-->
<!--                    <option>甘肃</option>-->
<!--                </optgroup>-->
<!--                <optgroup label="省会市">-->
<!--                    <option>郑州</option>-->
<!--                    <option>兰州</option>-->
<!--                    <option>金昌</option>-->
<!--                </optgroup>-->
<!--            </select>-->
<!--        </div>-->
<!--        <hr>-->
<!--        <div>-->
<!--            <label for="des">个性签名：</label>-->
<!--            <textarea id="des" name="des" rows="5" cols="40" placeholder="请写下您的与众不同"/></textarea>-->
<!--        </div>-->
<!--        <hr>-->
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
</div>
</body>
</html>